<template>
<div>
<!--  用户列表区域-->
    <h3 style="text-align: center">流量告警信息</h3>
    <el-table :data="userlist" border stripe size="mini">
      <el-table-column type="index"/>
      <el-table-column label="destAddr" prop="destAddr"/>
      <el-table-column label="port" prop="port"/>
      <el-table-column label="alarmType" prop="alarmType"/>
      <el-table-column label="date" prop="date"/>
      <el-table-column label="valid" prop="valid"/>
    </el-table>
<!--  分页区域-->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum"
    :page-sizes="[1, 2, 5, 10]"
    :page-size="queryInfo.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</div>
</template>

<script>
  export default {
    name: 'WarningTable',
    props:{
      dataObj:Object,
      timeChange:Boolean,
      userAddr:String
    },
    data(){
      return {
        // 获取用户列表的参数对象
        queryInfo: {
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 5
        },
        total: 3,
        userlist: [],
      }
    },
    watch:{
      timeChange() {
        this.getUserList()
      },
      userAddr(){
        this.getUserList()
      }
    },
    created() {
      this.getUserList()
    },
    methods: {
      async getUserList () {
        let params = new URLSearchParams()
        params.append('pagenum', this.queryInfo.pagenum - 1)
        params.append('pagesize', this.queryInfo.pagesize)
        params.append('addr', this.userAddr)
        params.append('startDate', this.dataObj.dateList[0])
        params.append('endDate', this.dataObj.dateList[this.dataObj.dateList.length-1])
        let getUserAlarmSplitPageByDateRes = await this.$http.post(
          '/zz/getUserAlarmSplitPageByDate',
          params
        )
        if (getUserAlarmSplitPageByDateRes.data.status !== 200) {
          return this.$message.error('获取失败！')
        }
        this.userlist = getUserAlarmSplitPageByDateRes.data.userAlarmList
        console.log(getUserAlarmSplitPageByDateRes.data)
        this.total = parseInt(getUserAlarmSplitPageByDateRes.data.totalNum)
      },
      // 监听 pagesize 改变事件
      handleSizeChange (newSize) {
        console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getUserList()
      },
      // 监听页码值改变的事件
      handleCurrentChange (newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getUserList()
      },
    }
  }
</script>

<style scoped>

</style>
